<template>
    <div :class="$style.top">
        <a-input-search placeholder="搜索分类" enter-button size="middle" @search="onSearch"></a-input-search>
        <div class="m-t-20">
            <a-button block @click="addCategory(0)">新增分类</a-button>
        </div>
    </div>
    <div class="m-t-20">
        <a-tree :class="$style.tree" v-if="category.length > 0" @select="onSelect" :tree-data="categoryTreeData" blockNode :field-names='{children : "children", title : "name", key : "id"}'>
            <template #title="row">
                <div :class="$style.treeRow">
                    <div>
                        <span style="margin-right: 5px;"><EyeInvisibleOutlined v-if="row.enable === false" /></span>
                        <span>{{ row.name }}</span>
                    </div>
                    <div v-if="row.id != 0">
                        <a-dropdown>
                            <a class="ant-dropdown-link" @click.prevent><SmallDashOutlined style="font-size: 20px;color:#fff" /></a>
                            <template #overlay>
                                <a-menu>
                                    <a-menu-item @click="addCategory(row.id)"><span class="color-primary">新增子分类</span></a-menu-item>
                                    <a-menu-item @click="update(row.data)"><span class="color-primary">修改分类</span></a-menu-item>
                                    <a-menu-item @click="del(row.data)"><span class="rise-color">删除分类</span></a-menu-item>
                                </a-menu>
                            </template>
                        </a-dropdown>
                    </div>
                </div>
            </template>
        </a-tree>
        <a-empty v-else  :image="Empty.PRESENTED_IMAGE_SIMPLE" description="暂无分类" />
    </div>

    <BDrawer v-model:visible='visible' :title='dialogTitle' width='600px' :confirm='submit'>
        <Edit :parent-id="currentParentId" :row="currentRow" ref="formRef" />
    </BDrawer>
</template>

<script lang="ts" setup>
    import { Empty } from 'ant-design-vue';
    import { listApi, deleteApi } from '@/api/apps/Category';
    import { Modal, message } from 'ant-design-vue';
    import { EyeInvisibleOutlined, SmallDashOutlined } from '@ant-design/icons-vue';
    import { computed, ref } from 'vue';
    import { recursionFn } from '@/utils';
    import Edit from './Edit.vue';
    import { useI18nStore } from '@/store/i18n';


    const emit = defineEmits<{
        (e : 'change', value : {name : string, id : number, parentId:number}) : void;
    }>()

    const i18n = useI18nStore()

    const visible = ref(false)
    const formRef = ref()
    const dialogTitle = ref()

    const currentRow = ref<any>()
    const currentParentId = ref(0)
    
    const keyword = ref('')
    const category = ref<any[]>([])
    const categoryTreeData = computed(() => {
        let treeData = [{name : '全部分类', id : 0, enable : true}]
        if(keyword.value) {
            treeData.push(...category.value.filter(item => item.name.includes(keyword.value)))
        }else {
            treeData.push(...recursionFn(category.value, Math.min(...category.value.map(r => r.parentId)), 'id', 'parentId', 'children'))
        }

        return treeData
    })


    function getList() {
        listApi().then(res => {
            category.value = res.data || []
            // if(res.data) {
            //     category.value = recursionFn(res.data, Math.min(...res.data.map(r => r.parentId)), 'id', 'parentId', 'children')
            // }else {
            //     category.value = []
            // }
             
        })
    }


    function onSearch(e) {
        keyword.value = e || ''
    }
    
    function onSelect(keys, e) {
        if(e.selectedNodes.length > 0) {
            const node = (e.selectedNodes)[0]
            emit('change', {name : node.name, id : node.id, parentId : node.parentId})
        }
    }


    function addCategory(parnetId:number) {
        currentParentId.value = parnetId
        currentRow.value = null
        dialogTitle.value = i18n.t("add")
        visible.value = true
    }

    function update(row) {
            dialogTitle.value = i18n.t('edit')
            currentRow.value = row
            visible.value = true
    }

    async function del(row) {
        Modal.confirm({
            title : i18n.t('confirmDel', [row.name]),
            async onOk() {
                const res = await deleteApi(row.id)
                if(res.success) {
                    getList()
                    message.success(i18n.t('deleteSuccess'))
                }else {
                    message.error(res.msg)
                }
            }
        })
            
    }

    async function submit() {
        const res = await formRef.value.submit()
        if(res.success) {
            getList()
            visible.value = false
            message.success('保存成功')
        }else {
            Modal.error({
                title : res.msg
            })
        }
    }
    

    getList()
    
</script>

<style lang="scss" module>
    .top{
        padding: 0 15px 15px 0;
        border-bottom: 1px solid $borderColor;
    }

    .treeRow{
        display: flex;
        justify-content: space-between;
    }

    .tree {
        :global(.ant-tree-node-selected) {
            background-color: $primaryColor !important;

            :global(.ant-tree-title) {
                color: #fff;
            }
        }
        

        
    }
</style>